<template>
<div id="app">
    <!--router-viwe直接渲染-->
    <div class="daohl">
        <div class="t1">
            <router-link to="/">
                <div class="shouye" v-bind:class="[f1]" @click="a(1)">
                    <div class="icon"><span class="iconfont">&#xe610;</span></div>首页
                </div>
            </router-link>

            <router-link to="/retiu">
                <div class="tuij" v-bind:class="[f2]" @click="b(2)">
                    <div class="icon"><span class="iconfont">&#xe652;</span></div>推荐
                </div>
            </router-link>

            <router-link to="/mapy">
                <div class="gouwuc" v-bind:class="[f3]" @click="c(3)">
                    <div class="icon"><span class="iconfont">&#xe673;</span></div>扫码充电
                </div>
            </router-link>

            <router-link to="/xiaox">
                <div class="xiaox" v-bind:class="[f4]" @click="d(4)">
                    <div class="icon"><span class="iconfont">&#xe62d;</span></div>消息
                </div>
            </router-link>

            <router-link to="/wode">
                <div class="wode" v-bind:class="[f5]" @click="e(5)">
                    <div class="icon"><span class="iconfont">&#xe659;</span></div>我的
                </div>
            </router-link>
        </div>
    </div>

    <router-view></router-view>

</div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            f1: ' ',
            f2: ' ',
            f3: ' ',
            f4: ' ',
            f5: ' ',
        }
    },
    created() {

    },

    mounted() {

        this.css1()

    },
    methods: {
        css1() {
            if (this.$router.history.current.path == '/') {
                console.log("222")
                this.f1 = 'f1'
                this.f2 = '',
                    this.f3 = '',
                    this.f4 = '',
                    this.f5 = ''
            }
        },
        a(a) {
            this.f1 = 'f' + a
            this.f2 = '',
                this.f3 = '',
                this.f4 = '',
                this.f5 = ''
        },
        b(a) {
            this.f2 = 'f' + a
            this.f1 = '',
                this.f3 = '',
                this.f4 = '',
                this.f5 = ''
        },
        c(a) {
            this.f3 = 'f' + a
            this.f2 = '',
                this.f1 = '',
                this.f4 = '',
                this.f5 = ''
        },
        d(a) {
            this.f4 = 'f' + a
            this.f2 = '',
                this.f3 = '',
                this.f1 = '',
                this.f5 = ''
        },
        e(a) {
            this.f5 = 'f' + a
            this.f2 = '',
                this.f3 = '',
                this.f4 = '',
                this.f1 = ''
        },

    },

}
</script>

<style>
html {
    background-color: rgb(240, 238, 238);
}

#app {
    background-color: rgb(231, 225, 225);

}

.daohl {
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: 38px;
    width: 100%;
    background-color: rgb(252, 250, 250);
    padding: 3px;
    z-index: 300;
    display: flex;
    border: solid 1px rgb(218, 215, 215);
}

.t1 {
    width: 100%;

}

.shouye,
.tuij,
.gouwuc,
.xiaox,
.wode {
    float: left;
    margin: 1px 1%;
    height: 25px;
    width: 17%;
    text-align: center;
    padding-top: 10px;
    color: rgb(116, 112, 112);
    font-size: 8px;

}

.icon {
    margin: -8px 5px 3px 5px;
}

.icon span {
    font-size: 20px;

}

.tuij {
    flex: 1;
}

.gouwuc {
    flex: 2;
}

.xiaox {
    flex: 3;
}

.wode {
    float: right;
    margin-right: 15px;
}

/*#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}*/
.f1,
.f2,
.f3,
.f4,
.f5 {
    color: chocolate;
    font-size: 13px;
    background-color: rgb(228, 228, 228);
    border-radius: 10px;
    height: 28px;
}
</style>
